<template>
  <!-- 添加/修改 求职意向 -->
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #backText></template>
      <template #content>求职意向</template>
      <template #right>
        <image class="more" src="../../../static/image/common/w-more.png" mode="widthFix" />
      </template>
    </cu-custom>

    <view class="aa-list">
      <view class="aa-item" @click="toPicker('type')">
        <view class="title">期望职位</view>
        <view class="value-wrap">
          <input class="value" disabled v-model="job_type" type="text" placeholder="如:销售" />
          <view class="arrow-right"></view>
        </view>
      </view>

      <view class="aa-item" @click="toPicker('industry')">
        <view class="title">期望行业</view>
        <view class="value-wrap">
          <input class="value" disabled v-model="job_industry" type="text" placeholder="如:互联网/电子商务" />
          <view class="arrow-right"></view>
        </view>
      </view>

      <view class="aa-item" @click="toPicker('region')">
        <view class="title">工作城市</view>
        <view class="value-wrap">
          <input class="value" disabled v-model="province" type="text" placeholder="如:北京" />
          <view class="arrow-right"></view>
        </view>
      </view>

      <view class="aa-item" @click="salaryShow = !salaryShow">
        <view class="title">期望月薪</view>
        <view class="value-wrap">
          <view class="value">
            <input type="text" disabled v-model="salary_min" placeholder="如:1K" />
            -
            <input type="text" disabled v-model="salary_max" placeholder="2K" />
          </view>
          <view class="arrow-right"></view>
        </view>
      </view>

      <view class="aa-item" @click="natureShow = !natureShow">
        <view class="title">工作性质</view>
        <view class="value-wrap">
          <input class="value" disabled v-model="nature" type="text" placeholder="如:全职" />

          <view class="arrow-right"></view>
        </view>
      </view>
    </view>

    <view class="submit-wrap">
      <view class="submit submit-0" @click="del">删除</view>
      <view class="submit submit-1" @click="intention">保存</view>
    </view>

    <Popups v-model:show="salaryShow" position="bottom" class="add-amend-popup">
      <view class="add-amend-popup-btns">
        <view class="btn btn-1" @click="salaryShow = !salaryShow">取消</view>
        <view>期望月薪</view>
        <view class="btn btn-2" @click="salaryBtn">确定</view>
      </view>
      <picker-view :value="salaryPicker" @change="bindChange">
        <picker-view-column>
          <view class="picker-item" v-for="item in salaryPickerList[0]">{{ item }}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="item in salaryPickerList[1]">{{ item }}</view>
        </picker-view-column>
      </picker-view>
    </Popups>

    <Popups v-model:show="natureShow" position="bottom" class="nature-popup">
      <view
        v-for="(item, index) in natureList"
        :class="['nature-item', { 'nature-item-on': natureIndex === index }]"
        @click="(natureIndex = index), (natureShow = !natureShow), (nature = item)"
      >
        {{ item }}
      </view>
    </Popups>
  </Top-Page>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import Popups from "@/components/Popups/index.vue";
import recruitApi from "@/api/recruit.js"; //招聘相关API

//期望职位
const job_type = ref("");
let job_value = [];

//期望行业
const job_industry = ref("");
let industry_value = [];

//工作城市
const province = ref("");
let province_value = [];

//月薪
const salaryShow = ref(false);
const salary_min = ref("");
const salary_max = ref("");
const salaryPicker = ref([0, 0]);
const salaryPickerList = reactive([[], []]);

//工作性质
const natureShow = ref(false);
const nature = ref("");
const natureList = reactive([]);
const config = uni.getStorageSync("config");
const natureIndex = ref(0);

let id = 0;

for (let i = 1; i <= 250; i++) {
  salaryPickerList[0].push(`${i}K`);
  salaryPickerList[1].push(`${i}K`);
}

natureList.push(...config.nature);
nature.value = natureList[0];

onLoad((param: any) => {
  id = param.id;
});

onShow(() => {
  const app = getApp();
  const modifyData = app.globalData.modifyData;

  if (id) {
    const a = uni.getStorageSync("amend-intention");
    province.value = `${a.province}/${a.city}/${a.area}`;
    job_value = [a.type_id];
    job_type.value = a.type;
    job_industry.value = a.industry;
    industry_value = [a.industry_id];
    salary_min.value = a.salary_min + "K";
    salary_max.value = a.salary_max + "K";
    nature.value = a.nature;
  }

  if (modifyData) {
    if (modifyData.type === "type") {
      job_type.value = modifyData.value.label.join("/");
      job_value = modifyData.value.value;
    }

    if (modifyData.type === "industry") {
      job_industry.value = modifyData.value.label.join("/");
      industry_value = modifyData.value.value;
    }

    if (modifyData.type === "region") {
      province.value = modifyData.value.label.join("/");
      province_value = modifyData.value.value;
    }
  }
});

const salaryBtn = () => {
  salaryShow.value = !salaryShow.value;
  salary_min.value = salaryPickerList[0][salaryPicker.value[0]];
  salary_max.value = salaryPickerList[1][salaryPicker.value[1]];
};

const bindChange = (e: any) => {
  const value = e.detail.value;
  salaryPicker.value = value;

  nextTick(() => {
    salaryPickerList[1].length = 0;

    for (let i = value[0]; i <= 250; i++) {
      const j = i + 2;
      j && salaryPickerList[1].push(`${j}K`);
    }
  });
};

//保存/更新
const intention = () => {
  const p = province.value.split("/");

  const message = !job_type.value
    ? "请选择期望职位"
    : !job_industry.value
    ? "请选择期望行业"
    : !p.length
    ? "请选择工作城市"
    : "";

  if (message) {
    uni.showToast({
      title: message,
      icon: "none"
    });
    return;
  }

  recruitApi
    .intention({
      id: id,
      job_type: job_value[job_value.length - 1],
      job_industry: industry_value[industry_value.length - 1],
      province: p[0],
      city: p[1] ?? p[0],
      area: p[2] ?? p[1] ?? p[0],
      salary_min: parseInt(salary_min.value),
      salary_max: parseInt(salary_max.value),
      nature: nature.value
    })
    .then((res: any) => {
      if (res.code == 0) {
        uni.navigateBack();
      }
    });
};

//删除
const del = () => {
  recruitApi
    .intentiondel({
      id: id
    })
    .then((res) => {
      if (res.code == 0) {
        uni.navigateBack();
      }
    });
};

const toPicker = (type: string) => {
  uni.navigateTo({
    url: `/pages/rest/picker-region/picker-region?type=${type}`
  });
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
